<template>
  <div v-if="showConfig">
    <a-form layout="vertical">
      <a-form-item v-if="data.type != 'grid'" label="小页标题">
        <a-input v-model:value="porlet.options.title" />
      </a-form-item>
    </a-form>
    <a-form layout="horizontal">
      <a-form-item v-if="Object.keys(data.options).includes('titleRequired')" label="显示标题" layout="inline">
        <a-switch v-model:checked="porlet.options.titleRequired" />
      </a-form-item>
      <a-form-item v-if="Boolean(data.options.titleRequired)" label="显示刷新" layout="inline">
        <a-switch v-model:checked="porlet.options.isShowRefresh" />
      </a-form-item>
      <a-form-item
        v-if="Object.keys(data.options).includes('fontSize') && Boolean(data.options.titleRequired)"
        label="标题字号"
        layout="inline"
      >
        <a-select v-model:value="porlet.options.fontSize" style="width: 60px">
          <a-select-option v-for="item in fontSizeList" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        v-if="Object.keys(data.options).includes('fontSize') && Boolean(data.options.titleRequired)"
        label="标题行高"
        layout="inline"
      >
        <a-select v-model:value="porlet.options.lineHeight" style="width: 60px">
          <template #suffixIcon><unordered-list-outlined /></template>
          <a-select-option v-for="tim in lineHeightList" :key="tim" :value="tim + ''">
            {{ tim }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <a-form layout="vertical">
      <a-form-item v-if="Object.keys(data.options).includes('fontSize') && Boolean(data.options.titleRequired)">
        <div class="avic-font-set-group">
          <span style="margin-right: 2px">标题样式 :</span>
          <a-checkable-tag :checked="Boolean(porlet.options.fontWeight)" @change="handleTagsChange($event, 'fontWeight')">
            B
          </a-checkable-tag>
          <a-checkable-tag
            :checked="Boolean(porlet.options.italic)"
            style="font-style: italic; padding-left: 4px"
            @change="handleTagsChange($event, 'italic')"
          >
            I
          </a-checkable-tag>
          <span class="avic-font-setting">
            <color-picker v-model:pureColor="porlet.options.fontColor" />
          </span>
        </div>
      </a-form-item>
      <a-form-item v-if="data.w == 0 || data.w > 0">
        <template #label>
          宽度
          <a-tooltip title="设计区域划分为24等分">
            <question-circle-outlined class="portal-icon-question-circle" />
          </a-tooltip>
        </template>
        <a-input-number v-model:value="porlet.w" :min="1" :max="24" :step="1" />
      </a-form-item>

      <a-form-item v-if="data.h" label="高度">
        <a-input-number
          v-model:value="dataHeight"
          :formatter="(value) => `${value}px`"
          :parser="(value) => value.replace('px', '')"
          :min="100"
          :max="2000"
          :step="10"
          @change="changeNumber"
        />
      </a-form-item>
      <a-form-item v-if="data.type != 'grid'" label="小页路径">
        <a-textarea :disabled="true" :value="porlet.url" />
      </a-form-item>
      <a-form-item v-if="data.type != 'grid'" label="小页描述">
        <a-textarea :disabled="true" :value="porlet.options.menuDes" />
      </a-form-item>
    </a-form>
  </div>
  <div v-else class="empty">
    <a-empty :image="simpleImage">
      <template #description>
        <span>请选择一个小页设置</span>
      </template>
    </a-empty>
  </div>
</template>

<script setup lang="ts">
import { ColorPicker } from 'vue3-colorpicker';
import 'vue3-colorpicker/style.css';
import { QuestionCircleOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
import { Empty } from 'ant-design-vue';
import { FONT_SIZE_MAP, LINE_HEIGHT_MAP } from './js/componentsConfig';

const props = defineProps({
  /** 门户小页配置信息 */
  data: { type: Object, default: null }
});
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const porlet = toRef(props, 'data');
const dataHeight = ref(0);
const fontSizeList = ref(FONT_SIZE_MAP);
const lineHeightList = ref(LINE_HEIGHT_MAP);
const showConfig = computed(() => {
  if (props.data && Object.keys(props.data).length > 0) {
    return true;
  }
  return false;
});
function changeNumber(value) {
  if (value === '' || value == null) {
    dataHeight.value = 100;
    porlet.value.h = 10;
  } else {
    porlet.value.h = dataHeight.value / 10;
  }
}
function handleTagsChange(e, key) {
  if (key) {
    porlet.value.options[key] = Number(e);
  }
}
watch(
  () => props.data.h,
  (val) => {
    if ((Object.keys(props.data).length > 0 && val == null) || val === '') {
      porlet.value.h = 10;
    }
    dataHeight.value = props.data.h * 10;
  }
);
watch(
  () => props.data.w,
  (val) => {
    if ((Object.keys(props.data).length > 0 && val == null) || val === '') {
      porlet.value.w = 1;
    }
  }
);
</script>
